<template>
  <el-form :model="params" :rules="rules" ref="params" class="demo-form-inline" label-position="top">
    <el-row :gutter="36">
      <el-col :span="6">
        <el-form-item :label="$t('financialSynergy.invoice.invoiceCode')" prop="invoiceCode">
          <el-input
            v-model="params.invoiceCode"
            :placeholder="$t('financialSynergy.invoice.inputPlaceholder')"
            clearable
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('financialSynergy.invoice.invoiceNumber')" prop="invoiceNo">
          <el-input
            v-model="params.invoiceNo"
            :placeholder="$t('financialSynergy.invoice.inputPlaceholder')"
            clearable
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('financialSynergy.invoice.invoiceTimes')" prop="invoicingDate">
          <el-date-picker
            v-model="params.invoicingDate"
            type="datetime"
            style="width: 100%"
            :placeholder="$t('financialSynergy.invoice.selectPlaceholer')"
            value-format="yyyy-MM-dd HH:mm:ss"
            :range-separator="$t('common.to')"
            :start-placeholder="$t('common.startTime')"
            :end-placeholder="$t('common.endTime')"
            clearable
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('financialSynergy.invoice.invocieAmountNoTax')" prop="untaxedAmount">
          <el-input
            v-model="params.untaxedAmount"
            :placeholder="$t('financialSynergy.invoice.inputPlaceholder')"
            clearable
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item :label="$t('financialSynergy.invoice.invocieAmountTax')" prop="amount">
          <el-input
            v-model="params.amount"
            :placeholder="$t('financialSynergy.invoice.inputPlaceholder')"
            clearable
            maxlength="50"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item :label="$t('financialSynergy.invoice.files')" prop="files">
          <template #label>
            <em class="required-icon">*</em>
            <span>{{ $t('financialSynergy.invoice.files') }}</span>
          </template>
          <x-upload
            ref="fileUpload"
            :edit-flag="true"
            :limit="9"
            :fileSize="20"
            :old-file-list="params.files || []"
            :file-type="['jpg', 'jpeg', 'png', 'ppt', 'pptx', 'pdf', 'xls', 'xlsx']"
          >
          </x-upload>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
  import { checkFloatNumber } from '@package/utils'

  export default {
    name: 'InvoiceForm',
    data() {
      return {
        params: {
          invoiceCode: '',
          invoiceNo: '',
          invoicingDate: '',
          untaxedAmount: '',
          amount: '',
          files: ''
        },
        rules: {
          invoiceCode: [
            { required: true, message: this.$t('financialSynergy.invoice.inputPlaceholder'), trigger: 'blur' }
          ],
          invoiceNo: [
            { required: true, message: this.$t('financialSynergy.invoice.inputPlaceholder'), trigger: 'blur' }
          ],
          invoicingDate: [
            {
              required: true,
              message: this.$t('financialSynergy.invoice.selectPlaceholer'),
              trigger: ['blur', 'change']
            }
          ],
          untaxedAmount: [
            { required: true, message: this.$t('financialSynergy.invoice.inputPlaceholder'), trigger: 'blur' },
            { validator: this.validateMoney, trigger: 'blur' }
          ],
          amount: [
            { required: true, message: this.$t('financialSynergy.invoice.inputPlaceholder'), trigger: 'blur' },
            { validator: this.validateMoney, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleValidate() {
        return new Promise((resolve, reject) => {
          this.$refs.params.validate((valid) => {
            if (valid) {
              const files = this.$refs.fileUpload.fileList
              if (!files?.length) {
                this.$message.error(this.$t('financialSynergy.invoice.filePlaceholder'))
                return reject()
              }
              const data = {
                ...this.params,
                files: files?.length
                  ? files.map((v) => {
                      return {
                        fileName: v.name || v.fileName,
                        filePath: v.filePath || v.response.data.filePath,
                        fileType: (v.name || v.fileName).slice((v.name || v.fileName).lastIndexOf('.') + 1),
                        remark: v.remark
                      }
                    })
                  : []
              }
              resolve(data)
            } else {
              reject()
            }
          })
        })
      },
      validateMoney(rule, value, callback) {
        if (value && value !== '' && !checkFloatNumber(value)) {
          callback(new Error(this.$t('financialSynergy.invoice.moneyRight')))
        } else {
          callback()
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .required-icon {
    margin-right: 4px;
    color: #f56c6c;
  }
</style>
